<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>chart</title>
        <style>
           html,body{overflow:hidden;padding:0;margin:0;}
        </style>
        <{script src="moo.js" app="desktop"}>
        <{script src="coms/highcharts.js" app="desktop"}>
    </head>
    <body>

		<!-- 3. Add the container -->
        <div id="container" style="width: 100%; height: 220px; margin: 0 auto"></div>
        <script type="text/javascript">

            var chart;
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'column',
                        margin: [ 50, 50, 50, 80],
                        events: {
                            click: function(e){
                                /*new Dialog(new Element('div'),{title:'',width:480,height:400,resizeable:false,onLoad:function(e){
                                    new Element('div#chart0',{style:'width:480px;'}).inject(this.dialog_body);
                                    Highcharts.visualize(table, index, 0);
                                }});*/
                            }
                        }
                    },

                    title: {
                        text: <{$title}>
                    },
                    xAxis: {
                        categories: <{$categories}>,
                        labels: {
                            rotation: -20,
                            align: 'right',
                            style: {
                                font: 'normal 12px Verdana, sans-serif'
                            }
                         }
                    },
                    yAxis: {
                        min: 0,
						stackLabels: {
							enabled: true
						},
                        title: {
                            text: ''
                        }
                    },
					plotOptions:{
						column:{
							dataLabels:{
								enabled: true
							}
						}
					},
                    tooltip: {
                        formatter: function() {
							return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': '+ this.y;
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'right',
                        x: 20,
                        y: 60,
                        borderWidth: 0
                    },
                    series: <{$data}>
                });


        </script>

    </body>
</html>
